<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>秀视频后台管理平台-背景音乐</title>
<meta name="keywords" content="秀视频后台管理平台">
<meta name="description" content="秀视频后台管理平台欢迎您的到来">
<link rel="shortcut icon" href="favicon.ico">
<link href="../css/github-gist.css" rel="stylesheet">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/font-awesome.css" rel="stylesheet">
<link href="../css/plugins/bootstrap-table/bootstrap-table.min.css"
	rel="stylesheet">
<link href="../css/animate.css" rel="stylesheet">
<link href="../css/style.css" rel="stylesheet">
<link href="../css/index.css" rel="stylesheet">
<link href="../css/base.css" rel="stylesheet">
<link href="../css/fakeLoader.css" rel="stylesheet">
<link href="../css/plugins/sweetalert/sweetalert.css" rel="stylesheet">

<style>
.news_infos span {
	font-size: 13px;
}

#picker {
	display: none;
}
</style>
</head>

<body class="white-bg" style="opacity: 0">
	<div id="fakeloader"></div>
	<div class="wrapper wrapper-content">
		<div class="ibox float-e-margins">
			<div class="ibox-title">
				<h5>背景音乐管理</h5>
				<div class="ibox-tools">
					<a class="collapse-link"> <i class="fa fa-chevron-up"></i>
					</a> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <i
						class="fa fa-wrench"></i>
					</a>
					<ul class="dropdown-menu dropdown-user">
						<li><a href="#">选项1</a></li>
						<li><a href="#">选项2</a></li>
					</ul>
					<a class="close-link"> <i class="fa fa-times"></i>
					</a>
				</div>
			</div>
			<div class="ibox-content">
				<div class="row row-lg">
					<div class="example">
						<table id="allBgm" data-mobile-responsive="true">
 
						</table>
						<div id="toolbar">
							<button class="type btn btn-outline btn-primary" type="button"
								id="typeButton" value="5">全部</button>
       
							<button class="type btn  btn-success" type="button"
								id="add">上传</button>
							<button class=" btn btn-danger" type="button"
								onclick="getSelectRows(1)">
								<i class="fa fa-remove"></i> 删除
							</button>
							<div id="uploader" class="wu-example">
								<div id="thelist" class="uploader-list"></div>
								<div class="btns">
									<div id="picker">选择文件</div>
								</div>
							</div>

						</div>
					</div>
				</div>

				<div class="modal inmodal" id="myModal" tabindex="-1" role="dialog"
					aria-hidden="true">
					<div class="modal-dialog" style="width: 702px">
						<div class="modal-content animated fadeInUp">
							<button type="button" class="close" style="margin-right: 7px"
								data-dismiss="modal">
								<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
							</button>
							<div class="infos" style="margin: 0px;">
								<div class="newsview" style="padding-top: 0px;">
									<h3 class="news_title"></h3>
									<div class="news_author">
										<span class="au01">徐塬峰</span><span class="au02"></span><span
											class="au03">共<b></b>人围观
										</span>
									</div>
									<div class="tags"></div>
									<div class="news_about">
										<strong>简介</strong><span class="news_intr"> </span>
									</div>
									<div class="news_infos"></div>
								</div>
							</div>
							<div class="modal-footer">
								<span class="update"></span>
								<button type="button" class="btn btn-primary"
									data-dismiss="modal">关闭</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="modal-form" class="modal fade" aria-hidden="true">
		<div class="modal-dialog" style="width: 25%;">
			<div class="modal-content">
				<div class="modal-body">
					<div class="row">
						<h3 class="m-t-none m-b">修改资源信息</h3>

						<form role="form" class="form-horizontal" >
							<div class="input-group m-b">
								<span class="input-group-addon">名称</span> <input type="text"
									id="newTitle" class="form-control" >
							</div>
							<div class="input-group m-b">
								<span class="input-group-addon">内容</span>
								<textarea id="newContent" class="form-control" ></textarea>
							</div>
							<div class="input-group m-b">
								<span class="input-group-addon">链接</span> <input type="text"
									id="newLink" class="form-control " >
							</div>
							<div class="input-group m-b">
								<span class="input-group-addon">密码</span> <input type="text"
									id="newPassword" class="form-control">
							</div>

							<div id="update"></div>
						</form>

					</div>
				</div>
			</div>
		</div>
	</div>
	
	
	
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/webuploader.js"></script>
	<script type="text/javascript" src="../js/webuploader.js"></script>
	<!-- 全局js -->
	<script src="../js/jquery.min.js"></script>
	<script src="../js/highlight.pack.js"></script>
	<script>
		hljs.initHighlightingOnLoad();
	</script>
	<script src="../js/bootstrap.min.js"></script>
	<!-- 自定义js -->
	<script src="../js/plugins/sweetalert/sweetalert.min.js"></script>
	<script src="../js/contabs.js"></script>
	<script src="../js/fakeLoader.min.js"></script>
	<!-- Bootstrap table -->
	<script src="../js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
	<script
		src="../js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>

	<script
		src="../js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
	<script src="../js/bgm/bgmTable.js"></script>
	<script src="../js/content.js"></script>
	<script
		src="../js/plugins/sweetalert/sweetalert.min.js"></script>

	<script src="../js/fakeLoader.min.js"></script>

	<script
		src="../js/plugins/validate/jquery.validate.min.js"></script>
	<script
		src="../js/plugins/validate/messages_zh.min.js"></script>


	<!-- Bootstrap table -->
	<script
		src="../js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
	<script
		src="../js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
	<script
		src="../js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$("#add").on('click', () => document.querySelector("#picker input[type='file']").click())
			var $list = $("#thelist");
			var $btn = $("#ctlBtn");
			var state = 'pending'; // 上传文件初始化
			var uploader = WebUploader.create({
				swf : 'webuploader/Uploader.swf',
				server : '../../bgm/addSubmit.do',
				pick : '#picker',
				resize : false,
				chunked : true, //开启分片上传
				chunkSize : 1024 * 1024 * 4, //每一片的大小
				chunkRetry : 100, // 如果遇到网络错误,重新上传次数
				threads : 3, //上传并发数。允许同时最大上传进程数。
				fileSingleSizeLimit : 5 * 1024 * 1024 * 1024,
				// 只允许选择图片文件。
                accept: {
                    title: 'HTML5组态文件',
                    extensions: 'mp3',
                    mimeTypes: 'audio/*'
                }
			// 单个文件大小限制 5 G
			});
			uploader.on('fileQueued', function(file) {
				$list.append('<div id="' + file.id + '" class="item">'
						+ '<h4 class="info">' + file.name + '</h4>'
						+ '<p class="state">等待上传...</p>' + '</div>');
				if(file.ext=='mp3'||file.ext=='wma'||file.ext=='wav') //如果音频的格式错误就不允许上传
				{
				    uploader.upload();
				    
                }
				else
				{
					$('#' + file.id).find('p.state').text('文件格式错误');
				}
                });
      			uploader.on('uploadProgress',function(file, percentage) {
								var $li = $('#' + file.id), $percent = $li
										.find('.progress .progress-bar');

								// 避免重复创建
								if (!$percent.length) {
									$percent = $(
											'<div class="progress progress-striped active">'
													+ '<div class="progress-bar" role="progressbar" style="width: 0%">'
													+ '</div>' + '</div>')
											.appendTo($li)
											.find('.progress-bar');
								}

								$li.find('p.state').text('上传中');

								$percent.css('width', percentage * 100 + '%');
							});

			uploader.on('uploadSuccess', function(file) {
				$('#' + file.id).find('p.state').text('已上传');
			});

			uploader.on('uploadError', function(file) {
				$('#' + file.id).find('p.state').text('上传出错');
			});

			uploader.on('uploadComplete', function(file) {
				$('#' + file.id).find('.progress').fadeOut();
				$('#' + file.id).find('p.state').fadeOut();
				$("#allBgm").bootstrapTable('refresh');
				
			});
		});
	</script>
</body>
</html>
